import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Popover,Tools,Button,List,WhiteSpace,Picker } from 'weaver-mobile';
import {Route, withRouter } from 'react-router-dom';
import { RouteLayout,Form,Upload } from 'weaver-mobile-page';
import AlertPage from '../../../public/alertPage/AlertPage';
const getLabel = Tools.getLabel;
const tweenFunctions = require('tween-functions');

// const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
// let wrapProps;
// if (isIPhone) {
//     wrapProps = {
//         onTouchStart: e => e.preventDefault(),
//     };
// }


@withRouter
@inject ('rememberStore')
@observer
class AdvancedForm extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            sValue: [],
            datasImg: [],
                          
        }

        // const {accountBookStore} = this.props;
        // const {setDateParams,getBaseRoute} = accountBookStore;

        // let now = getNow();
        // setDateParams({
        //     year:now.year,
        //     month:now.month
        // });
        
        // //获取基础路由
        // getBaseRoute(this)
        const {match,match:{path,isExact,params},rememberStore} = this.props;
        this.routeInfo = match;

        const {setTypeParams} = rememberStore;
        const {state} = this.props.location;
        setTypeParams(state ? state : {})


    }

    static defaultProps = {
        prefixCls:"fnaMobile-trip"
    }

    componentDidMount() {
        const { rememberStore,prefixCls } = this.props;
        const { getBaseData } = rememberStore;        
        getBaseData();
    }

    render() {
        const { rememberStore,prefixCls } = this.props;
        const { form } = rememberStore;

        return (
            <div className={`${prefixCls}`}>
                {this.routeInfo.path == '/home/remember/advanced' ? 
                    <div>高级搜索</div>
                    : 
                    <div>
                         <Form store={form} onChange={this.onChange}>
                            <List>
                                {this.getFields()}
                                
                            </List>

                            <WhiteSpace />
                            <Button type="primary" onClick={()=>{this.handleSubmit()}}  style={{ marginRight: '4px' }}>提交</Button>
                        </Form>
                        {false && <AlertPage show={true} icon="no-data" msg={getLabel(83553, "暂无数据")} ></AlertPage>}
                    </div>}



                {/* 路由层 */}
                <div>
                   
                </div>
            </div>
        )
    }

    getFields = () => {
        const { rememberStore } = this.props;
        const { form,visible,setVisible,uploadStore } = rememberStore;
        // console.log('form',toJS(form))
        const { conditioninfo, isInit } = form;
        const seasons = [
            {
              label: '录入方式1',
              value: '录入方式1',
            },
            {
              label: '录入方式2',
              value: '录入方式2',
            },


            {
              label: '录入方式3',
              value: '录入方式3',
            },
            {
              label: '录入方式4',
              value: '录入方式4',
            },
        ];


        const fields = [];
        if (isInit) {
            toJS(conditioninfo[0].items).map((item,index) => {
                if(item.domkey[0] == 'remindType'){
                    fields.push(
                    
                        <Picker
                            key={'remindtype'}
                            data={seasons}
                            title="选择录入方式"
                            value={this.state.sValue}
                            visible={ visible }
                            onChange={v => this.setState({ sValue: v })}
                            onOk={v => this.setState({ sValue: v })}
                            onVisibleChange={(v)=>{setVisible(v)}}
                            cols={1}
                            
                        >
                            <List.Item arrow="horizontal" className={'customStyle'}>录入方式</List.Item>
                        </Picker>
                    )
                }else if(item.domkey[0] == 'upload'){
                    fields.push(
                        <Upload
                            key={'upload'}
                            // onUploading={(type)=>SignUtil.onUploading(type,'imglist')}
                            uploadUrl="/api/doc/upload/uploadFile"
                            style={{margin:'12px auto 0px 6px'}}
                            store={uploadStore}
                            datas={this.state.datasImg}
                            listType="img"
                            editable={false}
                            onChange={this.onChangeImg}
                            limitType="jpg,jpeg,png"
                            note={'支持格式：jpg,jpeg,png'}
                            
                        />
                    )
                }else{
                    fields.push(<Form.Item
                        key={item.domkey.join('__')}
                        form={form}
                        fieldConfig={item}
                        onChange={form.onChange}
                    />)
                }
                   
            })
            return fields;
        }
        
    }

    onChange = (value) =>{
        console.log('value',value)
    }    

    //添加图片后 回调
    onChangeImg = (ids, datasImg) => {
        console.log('ids, datasImg: 141111111', ids, datasImg);
        this.setState({ datasImg:datasImg });
    }   
    
    //保存
    handleSubmit = () =>{
        const {rememberStore} = this.props;
        const { form } = rememberStore;
        let formParams = form.formParams;
        let pass = form.doValidate().pass;
        if(pass){
            console.log('通过')
        }else{
            console.log('不通过')
        }
    }    

    

}

export default AdvancedForm;